body {
	/* The surface is the material on which the widgets rest. */
	--surface-background: white;
	--surface-color: black;
	--surface-border: #999;

	/* An expression is something like a button that's raised over the surface. */
	--expression-background: linear-gradient(#fefefe, #ddd);
	--expression-color: black;
	--expression-border: 1px solid #999;
	--expression-padding: 2px 6px 2px 6px;
	--expression-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .25);

	/* A depression is an expression that's pushed down. */
	--depression-background: #ccc;
	--depression-color: black;
	--depression-border: 1px solid #999;

	/* An impression is something like a text-box that's naturally lower within the surface. */
	--impression-background: #f5f5f5;
	--impression-color: black;
	--impression-border: 1px solid #999;
	--impression-padding: 4px;
	--impression-box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, .25);

	/* The color used to focus or highlight things */
	--accent-background: #4397e6;

	/* The default border-radius for all widgets */
	--base-border-radius: 6px;
}
body.dark {
	--surface-background: #444;
	--surface-color: white;
	--surface-border: #111;

	--expression-background: linear-gradient(#545454, #333);
	--expression-color: #fff;
	--expression-border: 1px solid #111;
	--expression-padding: 2px 6px 2px 6px;
	--expression-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .25);

	--depression-background: #333;
	--depression-color: #fff;
	--depression-border: 1px solid #111;

	--impression-background: #565656;
	--impression-color: #fff;
	--impression-border: 1px solid #111;
	--impression-padding: 4px;
	--impression-box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, .25);

	--accent-background: #4397e6;

	--base-border-radius: 6px;
}

body {
	background: var(--surface-background);
	color: var(--surface-color);
	scrollbar-color: var(--depression-background) rgba(0,0,0,0); 
}
*::-webkit-scrollbar {
	background: rgba(0,0,0,0);
}
*::-webkit-scrollbar-thumb {
    background: var(--depression-background);
}

/* Button-like things*/

button, input[type=submit], input[type=button], input[type=reset] {
	background: var(--expression-background);
	color: var(--expression-color);
	border: var(--expression-border);
	padding: var(--expression-padding);
	border-radius: var(--base-border-radius);
	box-shadow: var(--expression-box-shadow);
}
button:active, input[type=submit]:active, input[type=button]:active, input[type=reset]:active {
	background: var(--depression-background);
	color: var(--depression-color);
	border: var(--depression-border);
}

input[type=file]::file-selector-button {
	background: var(--expression-background);
	color: var(--expression-color);
	border: var(--expression-border);
	padding: var(--expression-padding);
	box-shadow: var(--expression-box-shadow);
	border-radius: var(--base-border-radius);
}
input[type=file]::file-selector-button:active {
	background: var(--depression-background);
	color: var(--depression-color);
	border: var(--depression-border);
}
input[type=file]::-webkit-file-upload-button {
	background: var(--expression-background);
	color: var(--expression-color);
	border: var(--expression-border);
	padding: var(--expression-padding);
	box-shadow: var(--expression-box-shadow);
	border-radius: var(--base-border-radius);
}
input[type=file]::-webkit-file-upload-button:active {
	background: var(--depression-background);
	color: var(--depression-color);
	border: var(--depression-border);
}



/* Text-like things */

textarea,
input[type=email],
input[type=hidden],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=url],
input[type=week] {
	color: var(--impression-color);
	background: var(--impression-background);
	border:var(--impression-border);
	padding: var(--impression-padding);
	border-radius: var(--base-border-radius);
	box-shadow: var(--impression-box-shadow);
}
/* Remove the arrows from number input (can't style)*/
input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* Check boxes */

input[type=checkbox], input[type=radio] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: var(--impression-background);
	border: var(--impression-border);
	width: 1em;
	height: 1em;
	border-radius: calc(var(--base-border-radius) / 2);
	box-shadow: var(--impression-box-shadow);
}
input[type=checkbox]:checked, input[type=radio]:checked {
	background: var(--accent-background);
}
input[type=radio] {
	border-radius: 50%;
}

/* Range */

input[type=range] {
	-webkit-appearance: none;
	background: none;
}
input[type=range]::-webkit-slider-runnable-track  {
	border: var(--impression-border);
	background: var(--impression-background);
	height: .5em;
	border-radius: var(--base-border-radius);
}
input[type=range]::-moz-range-track {
	border: var(--impression-border);
	background: var(--impression-background);
	height: .5em;
	border-radius: var(--base-border-radius);
}
input[type=range]::-webkit-slider-thumb {
	background: var(--expression-background);
	border: var(--expression-border);
	box-shadow: var(--expression-box-shadow);
	-webkit-appearance: none;
	height: 1em;
	margin-top: calc(-.25em - 1px);
	width: 1em;
	border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
	background: var(--expression-background);
	border: var(--expression-border);
	box-shadow: var(--expression-box-shadow);
	-webkit-appearance: none;
	height: 1em;
	margin-top: calc(-.25em - 1px);
	width: 1em;
	border-radius: 50%;
}


/* Misc */

input[type=file] {
	color: var(--impression-color);
	background: var(--impression-background);
	border:var(--impression-border);
	padding: var(--impression-padding);
	border-radius: var(--base-border-radius);

	box-shadow: var(--impression-box-shadow);
}
input[type=color] {
	background: var(--impression-background);
	color: var(--impression-color);
	border: var(--impression-border);
	padding: var(--impression-padding);
	border-radius: var(--base-border-radius);

	box-shadow: var(--impression-box-shadow);
}
select:not([multiple]) {
	color: var(--impression-color);
	border: var(--impression-border);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	padding: var(--impression-padding);

    padding-right: 1.25em;
    appearance: none;
    position: relative;
	background-color: var(--impression-background);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='black'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em .5em;
    background-position: right center;
    background-clip: border-box;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
	border-radius: var(--base-border-radius);
	box-shadow: var(--impression-box-shadow);
}
select[multiple] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: var(--impression-color);
	background: var(--impression-background);
	border:var(--impression-border);
	padding: var(--impression-padding);
	border-radius: var(--base-border-radius);
	box-shadow: var(--impression-box-shadow);
}
.select[multiple]::-webkit-scrollbar {
  display: none;
}

